
<style>
	#table-lotterylist th.op {
		min-width: 50px;
	}
</style>

<div id="main-wrapper">
	<h1>
		<i class="glyphicon glyphicon-th"></i>讲座抽奖
	</h1>
	<table id="table-lotterylist" class="table table-striped">
		<thead>
		<tr>
			<th class="long">抽奖</th>
			<th>状态</th>
			<th class="op">操作</th>
		</tr>
		</thead>
		<tbody>
            <script type="text/html" id= "tr-tmpl">
                <tr>
                <td><%- content %></td>
                <td><%- state %></td>
                <td>
                    <a href="#/viewlottery?lyid=<%- lyid %>">详情</a>
                    </td>
                </tr>
            </script>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">
					<script type="text/html" id="pagin-tmpl">
						<ul class="pagination">
							<li>
								<a onclick="updateLotteryList(1)">&laquo;</a>
							</li>
							<% if (current > 2){ %>
								<li class="disabled">
									<a>..</a>
								</li>
							<% } %>
							<% if (prev) { %>
								<li>
									<a onclick="updateLotteryList(<%- prev %>)"><%- prev %></a>
								</li>
							<% } %>
							<li class="active">
								<a onclick="updateLotteryList(<%- current %>)"><%- current %></a>
							</li>
							<% if (next) { %>
								<li>
									<a onclick="updateLotteryList(<%- next %>)"><%- next %></a>
								</li>
							<% } %>
							<% if(current < (count - 1)){ %>
								<li class="disabled">
									<a>..</a>
								</li>
							<% } %>
							<li>
								<a onclick="updateLotteryList(<%- count %>)">&raquo;</a>
							</li>
						</ul>
					</script>
				</td>
			</tr>
		</tfoot>
	</table>
</div>

<script>
	var $tableList = $('#table-lotterylist'),
		$tbody = $tableList.find('tbody'),
        trTmpl = _.template($tbody.find('#tr-tmpl').html()),
        $paginTmpl = $tableList.find('#pagin-tmpl'),
		paginTmpl = _.template($paginTmpl.html());


	    updateLotteryList(1);

	function updateLotteryList(page) {
		$.get('/do/a/lotterylist',{
			page:page
		}, function(resObj){
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			if (! ok) return;
			var total = resObj['total'],
				lotteryList = resObj['lotteryList'];
			if (! lotteryList.length) {
				return $tbody.html([
					'<tr class="text-center">',
					'<td colspan="3">没有记录</td>',
					'</tr>'
				].join(''));
			}
            $tbody.html(_.reduce(lotteryList, function(memo, lottery){
                return memo + trTmpl({
                    lyid:lottery.id,
                    content: lottery.content,
                    state: lottery['state'] === 'active' ? '已结束' : '未开始'
                });
            }, ''));
            // pagination
			var count = Math.ceil(total / pageSize);
			$paginTmpl.next().remove();
			$paginTmpl.after(paginTmpl({
				current: page,
				prev: page > 1 ? page - 1 : null,
				next: page < count ? page + 1 : null,
				count: count
			}));
		});
	}
</script>



